<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="lib :: common_header"></head>
<body>
<div th:replace="lib :: header_box"></div>
<div th:replace="lib :: menu_box (22)"></div>

<div class="main-box">
    <div class="main-container">
        <div th:replace="lib :: main_container_header ('用户管理', '用户管理')"></div><!-- /main_container_header -->
        <div class="f14" id="app" v-cloak>
            <br>
            <!-- 用户列表 -->
            <div class="row">
                <div class="col-sm-12">
                    <el-card shadow="hover">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="姓名" style="margin-bottom:0;">
                                <el-input placeholder="请输入姓名"></el-input>
                            </el-form-item>
                            <el-form-item style="margin-bottom:0;">
                                <el-button type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <br>

                    <el-card class="box-card" shadow="hover">
                        <div class="fix">
                            <el-button type="primary" @click="openUserBox">创建用户</el-button>
                            <el-button type="danger" @click="delUser">删除用户</el-button>
                        </div>
                        <br>
                        <el-table :data="users"
                                  border
                                  @selection-change="selectionChange">
                            <el-table-column
                                    type="selection"
                                    width="40"></el-table-column>
                            <el-table-column prop="username" label="用户名"></el-table-column>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="email" label="邮箱"></el-table-column>
                            <el-table-column label="操作" width="150">
                                <template scope="scope">
                                    <el-button plain size="mini" @click="userHandleEdit(scope.row)">修改</el-button>
                                    <el-popover
                                            placement="left"
                                            title="用户信息"
                                            width="200"
                                            trigger="click"
                                            @show="showRole(scope.row.id)">
                                        <div class="f12">
                                            <p>姓名：{{ scope.row.name }} </p>
                                            <p>角色：{{ userForm.roleName }} </p>
                                            <p>邮箱：{{ scope.row.email }} </p>
                                            <p>电话：{{ scope.row.mobile }} </p>
                                            <p>备注：{{ scope.row.remark }} </p>
                                        </div>
                                        <el-button slot="reference"
                                                   type="mini">
                                            查看
                                        </el-button>
                                    </el-popover>


                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="tr mt10">
                            <el-pagination
                                    :page-sizes="[10, 20, 50, 100]"
                                    :page-size="pageSize"
                                    layout="sizes, prev, pager, next"
                                    :total="usersFromDB.length"
                                    @size-change="sizeChange"
                                    @current-change="pageChange">
                            </el-pagination>
                        </div><!-- /分页 -->
                    </el-card>
                </div><!-- /col -->
            </div><!-- /row -->

            <el-dialog title="保存用户信息" :visible.sync="dialogVisible" width="600px">
                <div class="zu" style="width:90%;">
                    <el-form :model="userForm" :rules="userRules" ref="userForm" label-width="130px">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="userForm.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="userForm.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="角色" prop="role">
                            <template>
                                <el-checkbox-group v-model="userForm.role">
                                    <template v-for="item in roles">
                                        <el-checkbox :label="item.id"
                                                     name="role">
                                            {{ item.label }}
                                        </el-checkbox>
                                    </template>
                                </el-checkbox-group>
                            </template>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="mobile">
                            <el-input v-model="userForm.mobile" placeholder="请输入电话"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input
                                    v-model="userForm.remark"
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入备注">
                            </el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="saveUser()">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div><!-- /zu -->
                <span slot="footer" class="dialog-footer">
                </span>
            </el-dialog>


        </div><!-- /app -->
    </div>
</div>
<div th:replace="lib :: javascript_box"></div>
<script th:src="@{/lib/console/user_index.js}"></script>
</body>
</html>
